<template>
  <div>
    <div v-if="Object.keys(list).length">
      <van-card>
        <template #title>
          <div>
            <div style="font-size: 18px; display: block; padding: 15px 0">
              {{ list.title }}
            </div>
          </div>
        </template>
        <template #tags>
          <div style="background-color: #e1f5f8; width: 40px; height: 18px">
            <div style="color: #52c6d4">{{ list.tags[0] }}</div>
          </div>
        </template>
      </van-card>
      <van-grid :border="false" :column-num="3">
        <van-grid-item
          ><template #text>
            <strong style="color: #fa5741">{{ list.price }}/月</strong>
            <div style="color: #a69999; font-size: 14px; padding: 5px 0">
              租金
            </div>
          </template></van-grid-item
        >
        <van-grid-item
          ><template #text>
            <strong style="color: #fa5741">{{ list.roomType }}</strong>
            <div style="color: #a69999; font-size: 14px; padding: 5px 0">
              房型
            </div>
          </template></van-grid-item
        >
        <van-grid-item
          ><template #text>
            <strong style="color: #fa5741">{{ list.size }}平方米</strong>
            <div style="color: #a69999; font-size: 14px; padding: 5px 0">
              面积
            </div>
          </template></van-grid-item
        >
      </van-grid>
      <van-grid :border="false" direction="horizontal" :column-num="2">
        <van-grid-item>
          <template #text>
            <div>
              <div
                style="
                  margin-left: 0;
                  font-size: 12px;
                  color: #999999;
                  padding: 8px 0;
                "
              >
                装修：<span style="font-size: 12px; color: #000">精装</span>
              </div>
              <div style="margin-left: 0; font-size: 12px; color: #999999">
                楼层：<span style="font-size: 12px; color: #000">{{
                  list.floor
                }}</span>
              </div>
            </div>
          </template></van-grid-item
        >
        <van-grid-item>
          <template #text>
            <div>
              <div
                style="
                  margin-left: 0;
                  font-size: 12px;
                  color: #999999;
                  padding: 8px 0;
                "
              >
                朝向：<span style="font-size: 12px; color: #000">{{
                  list.oriented[0]
                }}</span>
              </div>
              <div style="margin-left: 0; font-size: 12px; color: #999999">
                类型：<span style="font-size: 12px; color: #000">普通住宅</span>
              </div>
            </div>
          </template></van-grid-item
        >
      </van-grid>
      <div class="assorted">房屋配套</div>
      <van-grid :border="false" :column-num="5">
        <van-grid-item
          v-for="value in list.supporting"
          :key="value"
          icon="gift-o"
          :text="value"
        />
      </van-grid>
      <div style="margin: 50px"></div>
    </div>
    <PageLoading v-else></PageLoading>
  </div>
</template>

<script>
import PageLoading from '@/components/public/PageLoading.vue'

export default {
  name: 'MiddleBar',
  components: {
    PageLoading
  },
  props: {
    list: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="less" scoped>
.van-grid {
  border-top: 1px solid #d7d7d7;
}
.assorted {
  height: 50px;
  font-weight: 600;
  padding-left: 10px;
  line-height: 50px;
  border-top: 8px solid #f6f5f6;
}
</style>
